<!--
 * @Author: ShiJunJie
 * @Date: 2020-11-03 10:01:50
 * @LastEditors: ShiJunJie
 * @LastEditTime: 2022-04-13 15:18:09
 * @Descripttion: 头部信息条 布局
-->
<template>
  <a-layout-header class="header" id="layout-header">
    <div class="l">
      <div class="logo" @click="MenuSetCollapsed">
        <a-space>
          <!-- <Iconfont name="logo" style="font-size: 200px; height: 78px" /> -->
          <Icon class="logo-icon" icon="logos:vue" style="font-size: 28px" />
        </a-space>
      </div>
    </div>
    <div class="r">
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          欢迎使用
          <Icon icon="ph:user-fill" />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;" @click="goBack(0)">
                <a-space>
                  <Iconfont name="icon-guanbijiantou" />退出登录
                </a-space>
              </a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<script setup>
import { inject } from 'vue'
import { useRouter } from 'vue-router'
import storage from 'good-storage'
import { message } from 'ant-design-vue'

// import { User } from '@/api/user'

const MenuSetCollapsed = inject('MenuSetCollapsed')

const router = useRouter()
const newRoute = storage.get('USER_ROUTERS')

const goBack = async (url) => {
  if (!url) {
    // const res = await User.loginOut()
    // if (!res.code) {
    storage.clear()
    message.success('退出登录成功')
    setTimeout(() => {
      // window.location.reload()
      router.push('/login')
    }, 500)
    // }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background: #fff;
  display: flex;

  .l {
    flex-grow: 1;
    display: flex;

    .logo {
      padding-left: 25px;
      cursor: pointer;
    }

    .title {
      color: #325cfd;
      font-size: 18px;
      padding-top: 12px;
      margin-left: 8px;

      >span::before {
        content: '';
        padding-right: 8px;
        border-left: 1px solid #325cfd;
      }
    }
  }

  .r {

    // padding-top: 20px;
    // padding-right: 40px;
    .ant-btn {
      padding: 4px 9px;

      .anticon {
        color: #3b77fc;
      }
    }
  }
}
</style>
